import React, { Component } from "react";
import "./index.scss";
import { Accordion, Modal } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
import yhTools from "@tools/yh";

class CommonProblem extends Component {
	constructor(props) {
		super(props);
		this.state = {
			visibleModal: false
		};
	}
	handleCallPhone = () => {
		let callPhoneData = {
			telphone: "4006906663"
		};
		yhTools.callPhone(callPhoneData);
	};
	render() {
		let _pageParams = {
			header: {
				title: "常见问题",
				goBackAction: () => {
					this.props.history.goBack();
				}
			},

			cacheLifecycles: this.props.cacheLifecycles,
			history: this.props.history
		};
		return (
			<MainLayout isScroll={false} pageParams={_pageParams}>
				<Accordion className="custo-acc">
					<Accordion.Panel header="1.小辉付是什么？" className="pad">
						<p className="info-content">
							小辉付是永辉金融针对在永辉超市购物的客户开通的白条权益产品，先消费，后还款，最长35天免息，最高获得50000元额度（永辉生活、超级物种门店接入中，敬请期待)。
						</p>
					</Accordion.Panel>
					<Accordion.Panel
						header="2.小辉付可以在哪些永辉超市使用？"
						className="pad"
					>
						<p className="info-content">
							支持在线上永辉生活APP端及线下永辉超市、Bravo、Mini店消费使用（永辉生活、超级物种门店接入中，敬请期待)。
						</p>
					</Accordion.Panel>
					<Accordion.Panel header="3.小辉付怎么提额？" className="pad">
						<p className="info-content">
							小辉付的额度是根据您的综合信用及使用情况，进行不定期综合评估，多使用小辉付且还款情况良好，有助于提升您的小辉付额度哦。
						</p>
					</Accordion.Panel>
					<Accordion.Panel header="4.小辉付账单日？" className="pad">
						<p className="info-content">
							获取授信额度当日的次月对应日期为账单日（例：获得授信额度日期为5日，则账单日为每月5日；28-31日授信的用户，账单日统一为次月28日。
						</p>
					</Accordion.Panel>
					<Accordion.Panel header="5.小辉付还款日？" className="pad">
						<p className="info-content">
							账单日后5个自然日为还款日。还款日如未还款/最低还款，构成逾期(例：如账单日为5日，还款日为10日)。
						</p>
					</Accordion.Panel>
					<Accordion.Panel header="6.小辉付如何还款？" className="pad">
						<p className="info-content">
							①主动还款：账单生成后还款日之前可以在【永辉生活APP】-【小辉付】-【本期应还】里主动操作还款。
						</p>
						<p className="info-content">
							②系统代扣：除主动还款外，我们会在还款日当天上午、下午在您签约的还款卡中对账单全部金额进行自动代扣。
						</p>
						<p className="info-content">
							温馨提示：因扣款账号余额不足等原因造成的自动扣款失败，请及时主动操作还款。
						</p>
					</Accordion.Panel>
					<Accordion.Panel header="7.小辉付是否支持最低还款？" className="pad">
						<p className="info-content">
							支持，还款期内您可以选择最低还款，但剩余未还款本金从到期还款日的次日开始计算利息，并记入下期账单。最低还款不属于逾期。
						</p>
					</Accordion.Panel>
					<Accordion.Panel header="8.小辉付有还款通知吗？" className="pad">
						<p className="info-content">
							永辉金融会在出账日、还款日前短信提示您，请您注意查收并按时主动还款，避免逾期。
						</p>
					</Accordion.Panel>
					<Accordion.Panel
						header="9.申请退款后,小辉付满减券还会退还吗？"
						className="pad"
					>
						<p className="info-content">
							交易发生退款时，满减优惠券、随机立减优惠券不返还。
						</p>
					</Accordion.Panel>
					<Accordion.Panel header="10.怎么注销永辉金融账户？" className="pad">
						<p className="info-content">
							若需申请注销，请下载【永辉金融】APP，点击【我的】-设置-注销账户-签署《注销声明》-申请注销。
						</p>
					</Accordion.Panel>
				</Accordion>
				<div className="noproblem">
					<span className="no">没有找到合适的帮助信息？</span>
					<span
						className="customerService"
						onClick={() => {
							this.setState({ visibleModal: true });
						}}
					>
						联系客服
					</span>
				</div>
				<Modal
					visible={this.state.visibleModal}
					transparent
					maskClosable={false}
					onClose={() => {
						this.setState({ visibleModal: false });
					}}
					footer={[
						{
							text: "确定",
							onPress: () => {
								this.setState({ visibleModal: false });
							}
						}
					]}
				>
					<p className="customer-service">
						请前往永辉金融公众号留言，或拨打客服热线
						<a href="javascript:;" onClick={this.handleCallPhone}>
							400-690-6663
						</a>
					</p>
				</Modal>
			</MainLayout>
		);
	}
}

export default CommonProblem;
